<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>canvas</title>
  <meta name="description" content="Signature Pad - HTML5 canvas based smooth signature drawing using variable width spline interpolation.">

  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">

  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <style>
    html, body {
        height: 100%;
        margin: 0px;
        padding: 10px;
        overflow: hidden;
        -webkit-user-select: none;
    }

    .container {
        display: block;
        position: relative;
        height: 100%;
        border: 0px solid blue;
    }

    .operation {
        position: absolute;
        height: 60px;
        border: 0px solid green;
    }

    .canvasContainer {
        position: absolute;
        left: 0px;
        right: 0px;
        top: 60px;
        bottom: 0px;
        overflow-x: hidden;
        overflow-y: hidden;
        border: 1px solid #CCC;
    }

    #canvas {
        display: block;
        vertical-align: top;
    }

    .colorContainer {
        position: absolute;
        left: 5px;
        top: 75px;
        padding: 3px;
        background-color: #CCC;
        border: 1px solid #444;
    }

    .colorBlock {
        display: inline-block;
        width: 32px;
        height: 32px;
    }

    .bgColorBlock {
        display: inline-block;
        width: 32px;
        height: 32px;
    }
</style>
</head>
<body onselectstart="return false">
  <div class="container">
    <div class="operation">
        <button id="btnSetImage1">setImages1</button>&nbsp;
        <button id="btnSetImage2">setImages2</button>&nbsp;
        <button id="btnClearImage">clearImage</button>&nbsp;
        <button id="btnSetHtml">setHtml</button>&nbsp;
        <button id="btnClearHtml">clearHtml</button>&nbsp;
        <button id="btnClearStrokes">clearStrokes</button>&nbsp;
        <button id="btnUndo">undo</button>&nbsp;
        <button id="btnRedo">redo</button>&nbsp;
        <br/>
        <button id="btnRotate">rotate</button>&nbsp;
        <button id="btnScaleIn">scaleIn</button>&nbsp;
        <button id="btnScaleOut">scaleOut</button>&nbsp;
        <button id="btnBrightnessUp">brightnessUp</button>&nbsp;
        <button id="btnBrightnessDown">brightnessDown</button>&nbsp;
        <button id="btnInkMode">toInkMode</button>&nbsp;
        <button id="btnEraserMode">toEraserMode</button>&nbsp;
        <button id="btnSaveImage">saveImages</button>
    </div>
    <div class="canvasContainer">
        <canvas id="canvas"></canvas>
    </div>
    <div class="colorContainer">
        <div>
            <div class="colorBlock" style="background-color:white;"></div>
            <div class="colorBlock" style="background-color:black;"></div>
            <div class="colorBlock" style="background-color:red;"></div>
            <div class="colorBlock" style="background-color:orange;"></div>
            <div class="colorBlock" style="background-color:yellow;"></div>
            <div class="colorBlock" style="background-color:green;"></div>
            <div class="colorBlock" style="background-color:rebeccapurple;"></div>
            <div class="colorBlock" style="background-color:blue;"></div>
            <div class="colorBlock" style="background-color:fuchsia;"></div>
        </div>
        <div>
            <div class="bgColorBlock" style="background-color:white;"></div>
            <div class="bgColorBlock" style="background-color:black;"></div>
            <div class="bgColorBlock" style="background-color:red;"></div>
            <div class="bgColorBlock" style="background-color:orange;"></div>
            <div class="bgColorBlock" style="background-color:yellow;"></div>
            <div class="bgColorBlock" style="background-color:green;"></div>
            <div class="bgColorBlock" style="background-color:rebeccapurple;"></div>
            <div class="bgColorBlock" style="background-color:blue;"></div>
            <div class="bgColorBlock" style="background-color:fuchsia;"></div>
        </div>
    </div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/html2canvas.min.js"></script>
<script src="dist/canvas.umd.js"></script>
<script>
        var c = new Canvas('canvas');
        c.mode = 1;
        // 预先设置图片拉伸和对齐方式
        c.autoStrech = false;
        c.stretchDirection= 1;
        c.horizontalAlign = 0;
        c.verticalAlign = 0;
        c.addListener('imageLoaded', source => {
            console.log(source);
            // 也可以在此处根据实际情况设置图片拉伸和对齐方式
            
            if (c.isSingleImage()) {
                c.autoStrech = false;
                c.stretchDirection= 2;
                c.horizontalAlign = 1;
                c.verticalAlign = 1;
                c.updateLayout();
            } else if (c.isMutipleImage()) {
                c.autoStrech = false;
                c.stretchDirection= 0;
                c.horizontalAlign = 0;
                c.verticalAlign = 1;
                c.updateLayout();
            } else if (c.existHtml()) {
                c.horizontalAlign = 0;
                c.verticalAlign = 0;
                c.updateLayout();
            }
            
        });
        c.addListener('htmlLoaded', source => {
            console.log(source);
        });
        c.addListener('gesturedPoint', source => {
            // console.log(source);
        });
        c.addListener('newStroke', source => {
            // console.log(source);
        });
        c.addListener('strokeDeleted', source => {
            console.log(source);
        });
        $('#btnSetImage1').click(() => {
            c.images = ['https://img.pconline.com.cn/images/upload/upc/tx/itbbs/1609/10/c18/26799309_1473492439504_mthumb.jpg',
                'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2626179418,3878699242&fm=200&gp=0.jpg',
                'http://n.sinaimg.cn/translate/w900h626/20180209/70IK-fyrkuxs6184197.jpg',
                'http://himg2.huanqiu.com/attachment2010/2017/1024/14/24/20171024022423179.jpg',
                '1111111'];
        });
        $('#btnSetImage2').click(() => {
            c.images = ['https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2626179418,3878699242&fm=200&gp=0.jpg'];
        });
        $('#btnSetHtml').click(() => {
            c.html = "<button>哈哈哈哈</button><br/><img style='max-width:100%;max-height:100%' src='https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2626179418,3878699242&fm=200&gp=0.jpg'><br/><b>Hello World!</b>";
        });
        $('#btnClearStrokes').click(() => {
            c.clearStrokes();
        });
        $('#btnClearImage').click(() => {
            c.images = null;
        });
        $('#btnClearHtml').click(() => {
            c.html = null;
        });
        $('#btnUndo').click(() => {
            c.strokeUndo();
        });
        $('#btnRedo').click(() => {
            c.strokeRedo();
        });
        $('#btnRotate').click(() => {
            c.imageRotate(0, 90);
        });
        $('#btnScaleIn').click(() => {
            c.imageScaleIn();
        });
        $('#btnScaleOut').click(() => {
            c.imageScaleOut();
        });
        $('#btnBrightnessUp').click(() => {
            c.brightLightUp();
        });
        $('#btnBrightnessDown').click(() => {
            c.brightLightDown();
        });
        $('#btnInkMode').click(() => {
            c.mode = 1;
        });
        $('#btnEraserMode').click(() => {
            c.mode = 2;
        });
        $('#btnSaveImage').click(function () {
            c.saveImage();
        });
        $('div.colorBlock').click(function (event) {
            c.strokeColor = window.getComputedStyle(event.target).backgroundColor;
            $('div.colorBlock').css({ 'border': '0px', 'width': '32px', 'height': '32px' });
            event.target.style.width = '28px'
            if (c.strokeColor.toLowerCase() !== 'rgb(0, 0, 255)')
                $(event.target).css({ 'border': '2px solid blue', 'width': '28px', 'height': '28px' });
            else
                $(event.target).css({ 'border': '2px solid red', 'width': '28px', 'height': '28px' });
        });
        $('div.bgColorBlock').click(function (event) {
            c.backgroundColor = window.getComputedStyle(event.target).backgroundColor;
            $('div.bgColorBlock').css({ 'border': '0px', 'width': '32px', 'height': '32px' });
            event.target.style.width = '28px'
            if (c.backgroundColor.toLowerCase() !== 'rgb(0, 0, 255)')
                $(event.target).css({ 'border': '2px solid blue', 'width': '28px', 'height': '28px' });
            else
                $(event.target).css({ 'border': '2px solid red', 'width': '28px', 'height': '28px' });
        });
        $('div.colorBlock').get(2).click();
        $('div.bgColorBlock').get(5).click();
</script>
</body>
</html>
